<template>
    <div class="container">
        <header>
            <h1>公司动态</h1>
        </header>
        <div class="new">
            <div class="new-item" v-for="it in data.list" :key="it.id">
                <img :src="require('@/assets/img/new'+(it.id)+'.png')" alt="">
                <p>{{it.message}} </p>
                <span>{{it.date}} {{it.id}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import {get_new_data_API} from "@/utils/apis";
    import {reactive} from "@vue/reactivity";

    export default {
        name: "News",
        setup() {
            let data = reactive({
                list: []
            })

            async function init() {
                const {data: result} = await get_new_data_API()
                console.log(result)
                data.list = result
                console.log("--------------")
                console.log(data)
            }

            init()
            return {
                data
            }
        }
    }
</script>

<style scoped lang="less">
    .container {
        box-sizing: border-box;
        margin: 50px auto;
        width: 1300px;
        border: 1px solid transparent;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0px 0px 5px 2px #efefef;

        h1 {
            text-align: center;
            font-weight: 400;
            margin: 30px;
            font-size: 40px;
        }

        .new {
            width: 100%;

            .new-item {
                position: relative;
                box-sizing: border-box;
                width: 380px;
                height: 400px;
                margin: 26px;
                border-radius: 20px;
                box-shadow: 0px 0px 6px 2px #ccc;
                padding: 10px;
                float: left;

                img {
                    box-sizing: border-box;
                    margin: 10px auto;
                    width: 360px;
                    height: 270px;
                    border-radius: 6px;
                    display: block;
                    transition: .2s;
                }

                > p {
                    width: 360px;
                    margin: 20px 0px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .new-item:hover {
                > img {
                    margin-top: 0px;
                }
            }
        }
    }
</style>